<template>
  <div :class="$style.container" class="menu">
    <el-menu :default-active="$router.path" :collapse="isCollapse" background-color="#545c64" 
      text-color="#fff" active-text-color="#ffd04b" :class="$style.menu"
    >
      <template v-for="item in routes">
        <el-submenu :index="item.path" :key="item.path" v-if="(item.children && item.children.length > 0) && (!item.meta.isHidden)">
          <template slot="title">
            <i :class="[$style.icon,'iconfont',item.meta.icon]"></i>
            <span slot="title">{{item.meta.title}}</span>
          </template>
          <el-menu-item-group>
            <!-- 只有二级，没有三级 -->
            <router-link :to="item.path + '/' + subItem.path" v-for="subItem in item.children" :key="item.path + '/' + subItem.path" v-if="(!subItem.meta.isHidden) && (!subItem.children || subItem.children === 0)">
              <el-menu-item :index="item.path + '/' + subItem.path">{{subItem.meta.title}}</el-menu-item>
            </router-link>

            <el-submenu :index="item.path + '/' + subItem.path" :key="item.path + '/' + subItem.path" v-for="subItem in item.children" v-if="(subItem.children && subItem.children.length > 0) && (!subItem.meta.isHidden)">
              <template slot="title">
                <span slot="title">{{subItem.meta.title}}</span>
              </template>

              <el-menu-item-group>
                <!-- 三级 -->
                <router-link :to="item.path + '/' + subItem.path + '/'+third.path" v-for="third in subItem.children" :key="item.path + '/' + subItem.path + '/'+third.path">
                  <el-menu-item :index="item.path + '/' + subItem.path + '/'+third.path">
                    {{third.meta.title}}
                  </el-menu-item>
                </router-link>
              </el-menu-item-group>
            </el-submenu>

          </el-menu-item-group>
        </el-submenu>
        <!-- 只有一级，没有二级 -->
        <router-link :key="item.path" :to="item.path" v-if="(!item.children || item.children === 0) && (!item.meta.isHidden)">
          <el-menu-item :index="item.path">
            <i :class="[$style.icon,'iconfont',item.meta.icon]"></i>
            <span slot="title">{{item.meta.title}}</span>
          </el-menu-item>
        </router-link>
      </template>
    </el-menu>
  </div>
</template>
<script>
import { asyncRoutes } from "../router/router";
export default {
  data() {
    return {
      
    };
  },
  computed: {
    routes() {
      return asyncRoutes;
    },
    isCollapse () {
      return !this.$store.getters.sidebar
    }
  },

};
</script> 
<style lang="scss" module>
.container {
  .menu {
    height:100%;
    overflow: auto;
  }
  .icon {
    margin-right:10px;
    font-size:20px;
    color:#fff;
    vertical-align: middle;
  }
  
}
</style>

<style>
 a {
    text-decoration: none;
  }
</style>